<template>
    <div style="width:100%;height: 100%;background-color: rgb(255, 255, 255);">
        <div class="printId" id="printId">
            <div style="text-align: center;">
                <h2>
                    <span class="no-wrap-print">
                        散装食用植物油运输随车装运记录表（试行）
                    </span>
                </h2>
            </div>
            <table border="1" style="text-align:center; table-layout: fixed; width: 100%; font-size: 12px;">
                <tr style="height: 40px;">
                    <th colspan="3">运输车辆牵引车牌照号</th>
                    <th colspan="3">{{ tanker.plateNo }}</th>
                    <th colspan="3">挂车号/集装箱号/其他运输容器号</th>
                    <th colspan="3">{{ tanker.trailerNo }}</th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">装货数量</th>
                    <th colspan="3"></th>
                    <th colspan="3">运输容器</th>
                    <th colspan="3">□罐车 □液袋 □其他________</th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">本次装运油品名称</th>
                    <th colspan="3">大豆油（转基因）</th>
                    <th colspan="3">质量等级</th>
                    <th colspan="3">一级</th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">生产日期/
                        生产批号</th>
                    <th colspan="3"></th>
                    <th colspan="3">保质期
                        （限成品油）</th>
                    <th colspan="3">6个月</th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">生产厂家名称</th>
                    <th colspan="3">中储粮油脂（天津）有限公司</th>
                    <th colspan="3">生产厂家地址及联系方式</th>
                    <th colspan="3">天津港保税区海滨七路28号<br>022-66275042</th>
                </tr>
                <tr style="height: 80px;">
                    <th colspan="3">清洗情况</th>
                    <th colspan="6">运输车辆是否清洗（如“是”附清洗记录） 是□ 否□<br><br>清洗过程是否符合食品卫生要求 是□ 不涉及□ 否□</th>
                    <th colspan="3" style="vertical-align: top;">司机签字：</th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">前一载装运油品名称</th>
                    <th colspan="3">{{ tanker.lastTimeUnloadingGoodsName1 || '/' }}</th>
                    <th colspan="3">是否为转基因油品（请勾选）</th>
                    <th colspan="3">□是 □否</th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">前一载装运油品质量等级</th>
                    <th colspan="9">{{ tanker.lastTimeUnloadingGoodsName1 || '/' }}</th>
                    <!-- <th colspan="3">运输车辆是否清洁（如“是”请附清洁记录）</th>
                    <th colspan="3">□是 □否</th> -->
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">前一载装货时间</th>
                    <th colspan="3">{{ tanker.lastTimePickUpDate1 || '/' }}</th>
                    <th colspan="3">前一载装货地点（明确到具体单位）</th>
                    <th colspan="3">{{ tanker.lastTimePickUpCompanyName1 || '/' }}</th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">前一载卸货时间</th>
                    <th colspan="3">{{ tanker.lastTimeUnloadingDate1 || '/' }}</th>
                    <th colspan="3">前一载卸货地点（明确到具体单位）</th>
                    <th colspan="3">{{ tanker.lastTimeUnloadingCompanyName1 || '/' }}</th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">承运方单位名称</th>
                    <th colspan="3">{{ tanker.fleet }}</th>
                    <th colspan="3">承运方联系方式</th>
                    <th colspan="3"></th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">发货单位名称</th>
                    <th colspan="3">中储粮油脂（天津）有限公司</th>
                    <th colspan="3">发货单位地址及联系方式</th>
                    <th colspan="3">天津港保税区海滨七路28号<br>022-66275042</th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">铅封号</th>
                    <th colspan="3"></th>
                    <th colspan="3">收货单位名称</th>
                    <th colspan="3"></th>
                </tr>
                <tr style="height: 40px;">
                    <th colspan="3">目的地</th>
                    <th colspan="3"></th>
                    <th colspan="3">收货单位联系方式</th>
                    <th colspan="3"></th>
                </tr>
                <tr style="height: 100px;text-align: left; vertical-align: top;">
                    <th colspan="4">发货方装货作业人员签字：</th>
                    <th colspan="4">承运方驾驶员签字：</th>
                    <th colspan="4">收货方卸货作业人员签字：</th>
                </tr>
                <tr style="height: 40px;text-align: left;">
                    <th colspan="4">
                        发货日期:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
                    </th>
                    <th colspan="4">
                        承运日期:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
                    </th>
                    <th colspan="4">
                        收货日期:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
                    </th>
                </tr>
            </table>
            <span style=" display: inline-block;">备注：1.数量以过磅单为准。该表由发货方、承运方、收货方共同签字，由三方分别留档备查。</span>
            <br />
            <span style="text-indent: 3em; display: inline-block;">2.发货方留存件无需收货方签字。</span>
        </div>
    </div>
</template>
<script>
export default {
    name: "print",
    data() {
        return {

        }
    },
    props: {
        tanker: {
            type: Object,
            required: true
        },
    },
    methods: {
        print() {
            // 1. 创建打印内容副本
            const printHTML = document.querySelector('#printId').innerHTML;
            // 2. 创建新窗口并写入打印内容
            const newWin = window.open('', '', 'height=600,width=800');
            newWin.document.write(`
       <html>
        <head>
            <title>打印内容</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    margin: 20px;
                }
                @media print {
                    /* 强制打印背景颜色和图像 */
                   body, img {
                        -webkit-print-color-adjust: exact !important;
                        print-color-adjust: exact !important;
                        background-color: white !important;
                    }
                    @page {
                        margin: 0.5cm;
                    }
                    table {
                        border-collapse: collapse; /* 合并边框 */
                        border: 1px solid black;   /* 表格外边框 */
                        width: 100%;
                    }
                    table td, table th {
                        border: 1px solid black;   /* 单元格边框 */
                        padding: 4px;
                    }
                }
            </style>
        </head>
        <body>
            ${printHTML}
        </body>
    </html>
    `);
            newWin.document.close();
            // 3. 触发打印
            newWin.print();
            // 4. 打印完成后关闭窗口
            setTimeout(() => {
                newWin.close();
            }, 1000);
        }
    }
}
</script>
<style>
.flex-row {
    display: flex;
    flex-direction: row;
    position: relative;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 移除页眉页脚（部分浏览器支持） */
@media print {
    @page {
        margin: 0;
        size: auto;
    }

    body {
        margin: 0;
        padding: 0;
        background: #fff;
    }

    /* 隐藏浏览器默认页眉页脚 */
    .noprint,
    .noprint * {
        display: none !important;
    }

    /* 确保打印区域占满页面 */
    #printId {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        page-break-inside: avoid;
    }
}
</style>